<template>
  <div class="details">
    <!-- 商品大图 -->
    <div class="pic">
      <img :src="goodsList.src"
           alt="">
    </div>
    <div class="content">
      <!-- 商品标题价格等 -->
      <div class="title_price">
        <div class="title">
          {{goodsList.title}}
        </div>
        <div class="food">
          <span>主料：</span>
          <span>{{goodsList.zhuliao}}</span>
        </div>
        <div class="sales">
          <span>月售：</span>
          <span>{{goodsList.sales}}</span>
        </div>
        <div class="discount">
          <span>{{goodsList.discount}}</span>
        </div>
        <div class="price">
          <span class="p_price1">{{goodsList.price1}}</span>
          <span class="p_price2">{{goodsList.price2}}</span>
          <span>打包费10P/份</span>
        </div>
      </div>
      <!-- 店铺信息 -->
      <div class="shop">
        <span>华莱士全鸡汉堡</span>
        <span class="orange_words">4.5分</span>
        <span>配送30P</span>
        <span>30分钟</span>
      </div>
      <!-- 下单信息 -->
      <div class="orderInfo">
        <div class="title">下单信息</div>

        <div>
          <div class="layout">
            <span class="layout_left">已选</span>
            <span class="layout_right">规格A:香辣鸡排堡</span>
          </div>
          <div class="layout">
            <span class="layout_left">数量</span>
            <span class="layout_right">{{goodsList.num}}份</span>
          </div>
        </div>
      </div>
      <!-- 商品详情 -->
      <div class="detailsInfo">
        <div class="title">商品详情</div>
        <div>
          <div class="layout ">
            <span class="layout_left ">商品描述</span>
            <span class="layout_right">{{goodsList.miaoshu}}</span>
          </div>
          <div class="layout">
            <span class="layout_left">主料</span>
            <span class="layout_right">{{goodsList.zhuliao}}</span>
          </div>
          <div class="layout">
            <span class="layout_left">口味</span>
            <span class="layout_right">{{goodsList.taste}}</span>
          </div>

        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  created () {
    console.log(this.goodsList);
  },
  props: ['goodsList'],
}
</script>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
  // outline: solid red;
}
.pic {
  width: 100%;
  height: 340px;
  img {
    width: 100%;
    height: 100%;
  }
}

.content {
  margin: 15px;
  font-size: 14px;
}
.title_price,
.orderInfo,
.detailsInfo {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  margin-top: 15px;
}
.title_price span {
  margin-top: 10px;
  display: inline-block;
  color: #949292;
}
.title {
  font-size: 16px;
  font-weight: 600;
}
.shop {
  padding: 15px;
  background-color: #f9f9f9;
}
.discount span {
  font-size: 12px;
  color: #fc6d52;
  border: #fc6d52 1px solid;
  border-radius: 4px;
  padding: 2px;
}
.p_price1 {
  font-size: 20px;
  color: #fc6d52 !important;
  font-weight: 900px;
}
.p_price2 {
  margin: 0px 10px;
  text-decoration: line-through;
}
.shop span {
  margin-right: 5px;
}
.orange_words {
  color: #fc6d52;
}
.layout_left {
  width: 20%;
  display: inline-block;
}
.layout_right {
  color: #000;
  width: 70%;
  display: inline-block;
}
.layout {
  color: #949292;
  margin-top: 10px;
  justify-content: space-between;
}
</style>